<template>
    <div>
        <el-row>
            <el-col :span="8">
                <el-tabs v-model="queryData.Status" @tab-click="handleClick">
                    <el-tab-pane label="全部" name="null"></el-tab-pane>
                    <el-tab-pane label="已通过" name="2"></el-tab-pane>
                    <el-tab-pane label="已拒绝" name="1"></el-tab-pane>
                </el-tabs>
            </el-col>
            <el-col :span="16">
                <el-row>
                    <el-col :span="8">
                        &nbsp;
                    </el-col>
                    <el-col :span="6">
                        <el-input
                            placeholder="搜索姓名或手机号"
                            suffix-icon="el-icon-search"
                            v-model="queryData.NameOrPhone"
                            @blur="getData">
                        </el-input>
                    </el-col>
                    <el-col :span="2">
                        &nbsp;
                    </el-col>
                    <el-col :span="8">
                        <el-select v-model="queryData.Day2" @change="getData">
                            <el-option label="全部" value=""></el-option>
                            <el-option label="一天内" value="1"></el-option>
                            <el-option label="一周内" value="7"></el-option>
                            <el-option label="一月内" value="30"></el-option>
                        </el-select>
                    </el-col>
                </el-row>
            </el-col>
        </el-row>
        <div>
            <ul>
                <li v-for="(item,index) in dataList" :key="index" class="j_item">
                    <div class="j_item_title">申请人:{{item.username}}&nbsp;<img src="../../../../assets/img/new.png" alt=""></div>
                    <div class="j_item_context">身份证号:{{item.idcard}}</div>
                    <div class="j_item_context">联系电话:{{item.phone}}</div>
                    <div>
                        <togger :showData="item"></togger>
                    </div>
                    <div class="j_right_btn" v-if="item.status == 3">
                        <el-button type="primary" size="mini" @click="audit(item.id,2)">通过</el-button>
                        <el-button type="warning" size="mini" style="margin:8px 0" @click="audit(item.id,1)">拒绝</el-button>
                    </div>
                </li>
            </ul>
        </div>
        <div style="text-align:right;margin:15px 0;">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="queryData.pageIndex"
                :page-sizes="[10, 20, 50, 100]"
                :page-size="queryData.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
import togger from "./toggerList";
import { getAppointList,doAudit } from '@/api/user.js'

export default {
 components: { togger },
  data() {
    return {
      dataList: [],
      queryData: {
        NameOrPhone: "",
        Day1: "0",
        Day2: "",
        Status: "null",
        pageIndex: 1,
        pageSize: 10
      },
      total: 0
    };
  },
  created() {
    this.getData(); //调用获取数据接口 初始化数据
  },
  methods: {
    getData() {
      getAppointList(this.queryData).then(res=>{
        this.dataList = res.data.list
        this.total = res.data.total
      })
    },
    handleClick(tab, event) {
      console.log(tab, event);
      this.getData();
    },
    audit(uid,status){
      doAudit({"AppUserId":uid,"Status":status}).then(res=>{
        if (res.statusCode == 200) {
          this.$message({
            message: res.msg,
            type: "success"
          });
          this.getData();
        }
      })
    },
    handleSizeChange(val) {
      this.queryData.pageSize = val;
      this.getData();
    },
    handleCurrentChange(val) {
      this.queryData.pageIndex = val;
      this.getData();
    }
  }
};
</script>

<style scoped>
</style>
